<template>
  <div>
    <div class="el-card zk-searcher">
      <el-row>
        <el-col :span="20">
          <el-form :inline="true" :model="formInline">
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-input v-model="formInline.project_name" size="small" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作名称">
                <el-input v-model="formInline.work_name" size="small" placeholder="请输入工作名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务名称">
                <el-input v-model="formInline.task_name" size="small" placeholder="请输入任务名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成部门">
                <el-select v-model="formInline.done_person_dept" size="small" placeholder="请选择完成部门">
                  <el-option
                    v-for="item in bumen"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="审批状态">
                <el-select v-model="formInline.sp_state" size="small" placeholder="请选择审批状态">
                  <el-option
                    v-for="item in zhuangtai"
                    :key="item.value"
                    :label="item.label"
                    :value="String(item.value)">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完成时间" style="white-space: nowrap">
                <el-date-picker
                  v-model="formInline.time"
                  size="small"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="4">
          <div class="submit-btn">
            <el-button type="primary" size="medium" @click="search">查询</el-button>
            <el-button size="medium" plain @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="zk-table">
      <div class="top-bar">
        <div class="left">
          <div class="table-description"> 待审批任务列表</div>
        </div>
        <div class="right">
          <el-button type="primary" size="medium" @click="batchclick">批量通过</el-button>
        </div>
      </div>
      <div class="tablebox">
        <el-table
          ref="multipleTable"
          class="flex-1 mt-20"
          :data="tableData"
          tooltip-effect="dark"
          stripe
          row-class-name="row-class-name"
          cell-class-name="cell-class-name"
          header-row-class-name="header-row-class-name"
          header-cell-class-name="header-cell-class-name"
          style="width:100%"
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column show-overflow-tooltip prop="project_name" label="项目名称" />
          <el-table-column show-overflow-tooltip prop="work_name" label="工作名称" />
          <el-table-column show-overflow-tooltip prop="task_name" label="任务名称" />
          <el-table-column show-overflow-tooltip prop="done_person_name" label="完成人" />
          <el-table-column show-overflow-tooltip prop="done_person_dept" label="完成部门" />
          <el-table-column show-overflow-tooltip prop="done_time" label="完成时间" />
          <el-table-column label="风险等级" width="160px">
            <template slot-scope="scope">
              <template type="text" v-if="scope.row.exist_replace == 1">
                <el-alert
                  :title="transformLevel(scope.row.max_mvp).value"
                  :type="transformLevel(scope.row.max_mvp).className"
                  :closable="false"
                  show-icon>
                </el-alert>
              </template>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="审批记录">
            <template slot-scope="scope">
              <div class="cursor" @click="showtable(scope.row.rel_task_id, scope.row.rel_project_id)">
                <i class="el-icon-document"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.sp_state == '0'" @click="handleEdit(scope.$index, scope.row)">审批
              </el-button>
              <el-button type="text" v-else disabled>已审批</el-button>
              <!-- <el-button v-if="scope.row.sp_state == '0'" type="text" @click="handleEdit(scope.$index, scope.row)">审批</el-button>
              <el-button v-else type="text" style="cursor:not-allowed;">审批</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100 , 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="currentPageChange"
        >
        </el-pagination>
        <!--<zk-pagination-->
        <!--v-model="pagination"-->
        <!--:total="total"-->
        <!--/>-->
      </div>
    </div>
    <w-dialog :visible.sync="diashow" max-height="70vh" width="60%" :title="title">
      <div class="centerbox">
        <el-table
          ref="multipleTable"
          class="flex-1 mt-20"
          :data="tableData2"
          tooltip-effect="dark"
          stripe
          row-class-name="row-class-name"
          cell-class-name="cell-class-name"
          header-row-class-name="header-row-class-name"
          header-cell-class-name="header-cell-class-name"
          style="width:100%"
          height="50vh"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column show-overflow-tooltip prop="sp_level_desc" label="审批批次" />
          <el-table-column show-overflow-tooltip prop="sp_person_name" label="审批人" />
          <el-table-column show-overflow-tooltip prop="sp_dept_name" label="审批人部门" />
          <el-table-column show-overflow-tooltip prop="sp_time" label="审批时间" />
          <el-table-column show-overflow-tooltip prop="sp_content" label="审批结果" />
        </el-table>
      </div>
      <template #footer>
        <div class="flex-end">
          <el-button type="primary" @click="diashow=false">关闭</el-button>
        </div>
      </template>
    </w-dialog>
    <w-dialog :visible.sync="approvalshow" max-height="70vh" width="60%" :title="title1">
      <div class="centerbox">
        <div class="item">
          <div class="datatitle">项目名称:</div>
          <div class="datalist">{{ diaproject_name }}</div>
        </div>
        <div class="item">
          <div class="datatitle">工作名称:</div>
          <div class="datalist">{{ diawork_name }}</div>
        </div>
        <div class="item">
          <div class="datatitle">任务名称:</div>
          <div class="datalist">{{ diatask_name }}</div>
        </div>
        <div v-for="(item,index) in fortable" :key="index">
          <div class="tabletile item-table-title">
            {{ item.title.itemName }}
            <template v-if="item.title.isMvp">
              <el-alert
                v-if="(item.body||[]).some(e=>e['是否替换'] === '是')"
                style="width: 140px"
                :title="`风险等级 [${transformLevel(item.title.isMvp).value}] `"
                :type="transformLevel(item.title.isMvp).className"
                :closable="false"
                show-icon>
              </el-alert>
              <el-tag
                class="ml-10"
                type="danger"
                effect="dark"
              >关键要件
              </el-tag>
            </template>
          </div>
          <el-table
            ref="multipleTable"
            class="flex-1 mt-20"
            :data="item.body"
            tooltip-effect="dark"
            stripe
            row-class-name="row-class-name"
            cell-class-name="cell-class-name"
            header-row-class-name="header-row-class-name"
            header-cell-class-name="header-cell-class-name"
            :row-style="getrow"
            style="width:100%"
            height="auto"
          >
            <!-- <el-table-column type="selection" width="55" /> -->
            <!-- <el-table-column show-overflow-tooltip prop="c00" label="会议时间" />
            <el-table-column show-overflow-tooltip prop="c06" label="参会人员" />
            <el-table-column show-overflow-tooltip prop="c01" label="附件数量" />
            <el-table-column show-overflow-tooltip prop="c02" label="完成人" />
            <el-table-column show-overflow-tooltip prop="c03" label="完成部门" />
            <el-table-column show-overflow-tooltip prop="c04" label="完成时间" />
            <el-table-column show-overflow-tooltip prop="c05" label="替代说明" /> -->
            <el-table-column
              show-overflow-tooltip
              v-for="(inneritem, j) in item.head" :key="j"
              :prop="inneritem.colName"
              :label="inneritem.colName"
            />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="download(scope.$index, scope.row)">下载附件</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="tabletile">用印审批单</div>
        <el-table
          ref="multipleTable"
          class="flex-1 mt-20"
          :data="tableData4"
          tooltip-effect="dark"
          stripe
          row-class-name="row-class-name"
          cell-class-name="cell-class-name"
          header-row-class-name="header-row-class-name"
          header-cell-class-name="header-cell-class-name"
          style="width:100%"
          height="auto"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column show-overflow-tooltip prop="c00" label="审批时间" />
          <el-table-column show-overflow-tooltip prop="c01" label="附件数量" />
          <el-table-column show-overflow-tooltip prop="c02" label="完成人" />
          <el-table-column show-overflow-tooltip prop="c03" label="完成部门" />
          <el-table-column show-overflow-tooltip prop="c04" label="完成时间" />
          <el-table-column show-overflow-tooltip prop="c05" label="替代说明" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="dowloud2(scope.$index, scope.row)">下载附件</el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </div>
      <template #footer>
        <div class="flex-end">
          <el-button type="primary" @click="passclick">通过</el-button>
          <el-button type="danger" plain @click="rebutclick">驳回</el-button>
          <el-button @click="approvalshow = false">关闭</el-button>
        </div>
      </template>
    </w-dialog>
    <w-dialog :visible.sync="diashow2" height="auto" :title="title2">
      <div class="centerbox">
        <div class="item">
          <div class="datatitle">驳回理由:</div>
          <div class="datalist">
            <el-input type="textarea" v-model="reject" :rows="6" style="width:300px;"></el-input>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex-end">
          <el-button type="primary" @click="successclick">确定</el-button>
          <el-button type="default" @click="diashow2 = false">取消</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
import api            from '@/api/api'
import ZkTable        from '@/components/zk-table'
import ZkSearcher     from '@/components/zk-searcher'
import ZkPagination   from '@/components/zk-pagination'
import { mapGetters } from 'vuex'

export default {
  name      : "task-approval.vue",
  components: { ZkTable, ZkSearcher, ZkPagination },
  props     : {},
  data() {
    return {
      tableData        : [],
      currentPage      : 1,
      total            : 1,
      pageSize         : 10,
      multipleSelection: '',//批量
      projectIdList    : '',
      workIdList       : '',
      taskIdList       : '',
      idList           : '',
      formInline       : {
        project_name    : '',
        work_name       : '',
        task_name       : '',
        done_person_dept: '',
        time            : '',
        sp_state        : '0'
      },
      bumen            : [],
      zhuangtai        : [
        {
          value: '',
          label: '全部'
        }, {
          value: 0,
          label: '待审批'
        }, {
          value: 1,
          label: '审批通过'
        }, {
          value: 2,
          label: '驳回'
        }
      ],
      diashow          : false,
      title            : '审批记录',
      tableData2       : [],
      approvalshow     : false,
      title1           : '审批',
      tableData3       : [
        { c00: '2020-09-20', c01: '1', c02: '张三', c03: '技术规划部', c04: '2020-09-21 10:03', c05: '有', c06: '张三' }
      ],
      tableData4       : [
        { c00: '2020-09-20', c01: '1', c02: '张三', c03: '技术规划部', c04: '2020-09-21 10:03', c05: '无', }
      ],
      title2           : '驳回',
      diashow2         : false,
      reject           : '',
      diaproject_name  : '',
      diawork_name     : '',
      diatask_name     : '',
      rel_work_id      : '',
      diarel_task_id   : '',
      diaid            : '',
      diasz_task_id    : '',
      diarel_project_id: '',
      fortable         : [],
    }
  },
  computed  : {
    ...mapGetters(['dictionaries']),
    pagination() {
      return {
        currentPage: this.currentPage,
        pageSize   : this.pageSize
      }
    }
  },
  watch     : {},
  methods   : {
    getrow({ row, rowIndex }) {
      // console.log(row.c05)
      let styleJson = {}
      if (row.c05 == '有') {
        styleJson = {
          'color': '#FD5E5E !important'
        }
      }
      else {
        styleJson = {}
      }
      return styleJson
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val
      var idList = this.multipleSelection.map((item) => {
        return item.id
      })
      this.idList = idList.join(';')

      this.workIdList = this.multipleSelection.map(item => item.rel_work_id).join(';')
      this.projectIdList = this.multipleSelection.map(item => item.rel_project_id).join(';')
      this.taskIdList = this.multipleSelection.map(item => item.rel_task_id).join(';')
    },
    handleEdit(index, row) {
      this.diaproject_name = row.project_name
      this.diawork_name = row.work_name
      this.diatask_name = row.task_name
      this.rel_work_id = row.rel_work_id
      this.diarel_task_id = row.rel_task_id
      this.diaid = row.id
      this.diasz_task_id = row.sz_task_id
      this.diarel_project_id = row.rel_project_id
      api.get['/rest/info/searchItemListAndInfo'](this.diarel_project_id, this.rel_work_id, this.diarel_task_id)
        .then(({ data }) => {
          if (!data) return
          this.fortable = data.data.payload
          this.approvalshow = true
        })

    },
    //审批记录
    showtable(rel_task_id, rel_project_id) {
      console.log(rel_project_id)
      api.get['/rest/rptSp/querySpHis_byTask'](rel_project_id, rel_task_id)
        .then(({ data }) => {
          if (!data) return
          this.tableData2 = data.data
          // console.log(data)
        })
      this.diashow = true
    },
    download(index, row) {
      window.open(`/moon/rest/file/download?fileid=${ row.fileIdList[0].fileId }`)
    },
    dowloud2(index, row) {

    },
    //批量通过
    batchclick() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择批量通过的数据',
          type   : 'warning'
        })
      }
      else {
        this.$alert(`确认通过 ${ this.multipleSelection.length } 条记录`, '确认通过', {
          confirmButtonText: '确定',
          callback         : async action => {
            if (action === 'confirm') {
              api.post['/rest/rptSp/doSptg_bat'](this.projectIdList, this.workIdList, this.taskIdList, this.idList)
                .then(({ data }) => {
                  if (!data) return
                  this.$store.dispatch('getApprovalList')
                  this.$message({ message: '审批通过成功', type: 'success' })
                  this.getdata()
                })
            }
          }
        })
      }
    },
    //通过
    passclick() {
      const spbtg_content = ''
      const sp_state = '1'
      api.post['/rest/rptSp/doSp'](this.diarel_project_id, spbtg_content, sp_state, this.rel_work_id, this.diarel_task_id, this.diaid,)
        .then(({ data }) => {
          if (!data) return
          this.$store.dispatch('getApprovalList')
          this.approvalshow = false
          this.$message({
            message: '审批通过成功',
            type   : 'success'
          })
          this.getdata()
          this.$store.dispatch('getHeaderTotals')
        })

    },
    //驳回
    rebutclick() {
      this.diashow2 = true
    },
    //确定驳回
    successclick() {
      if (this.reject == '') {
        this.$message({
          message: '驳回理由不能为空',
          type   : 'warning'
        })
        return
      }
      const spbtg_content = this.reject
      const sp_state = '2'
      api.post['/rest/rptSp/doSp'](this.diarel_project_id, spbtg_content, sp_state, this.rel_work_id, this.diarel_task_id, this.diaid)
        .then(({ data }) => {
          if (!data) return
          this.diashow2 = false
          this.approvalshow = false
          this.getdata()
          this.$message({
            message: '审批驳回成功',
            type   : 'success'
          })
          this.$store.dispatch('getHeaderTotals')
        })

    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getdata()
    },
    currentPageChange(page) {
      this.currentPage = page
      this.getdata()
    },
    getdata() {
      console.log(this.formInline.time)
      if (this.formInline.done_person_dept == undefined) {
        this.formInline.done_person_dept = ''
      }
      api.get['/rest/rptSp/querySpList'](
        this.formInline.project_name,
        this.formInline.work_name,
        this.formInline.task_name,
        this.formInline.done_person_dept,
        this.formInline.time[0],
        this.formInline.time[1],
        this.formInline.sp_state,
        this.pageSize,
        this.currentPage - 1
      )
        .then(({ data }) => {
          if (!data) return
          this.tableData = data.data.payload.list
          this.total = data.data.payload.total
        })
    },
    getdeplist() {
      api.get['/rest/rptSp/queryDoneDeptList']()
        .then(({ data }) => {
          if (!data) return
          this.bumen = data.data
        })
    },
    //搜索
    search() {
      this.currentPage = 1
      this.getdata()
    },
    //重置
    reset() {
      this.formInline.project_name = ''
      this.formInline.work_name = ''
      this.formInline.task_name = ''
      this.formInline.done_person_dept = ''
      this.formInline.time = ''
      this.formInline.sp_state = '0'
      this.pageSize = 10
      this.currentPage = 1
      this.getdata()
    },
    transformLevel(key) {
      return this.dictionaries.itemImportantDocument.find(e => e.key === key) || {}
    }
  },
  mounted() {
    this.getdeplist()
    this.getdata()
  },
}
</script>
<style lang="scss" scoped>
@import "~@/assets/css/_variables.scss";

.zk-searcher {
  position: relative;
  overflow: unset;
  padding: 20px 20px 2px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .submit-btn {
    position: absolute;
    bottom: 18px;
    right: 20px;
  }

  .submit-btn {
    text-align: center;
  }

  .el-form-item.el-form-item--small {
    white-space: nowrap;
  }
}

.zk-table {
  padding: 30px 40px 0;
  margin-top: 10px;
  background: white;
  padding-bottom: 10px;
  width: 100%;

  .top-bar {
    display: flex;
    justify-content: space-between;
  }

  .table-description {
    font-size: 16px;
    color: #3a404c;
    letter-spacing: 2px;
    font-weight: 600;
  }

  .table-description:before {
    vertical-align: bottom;
    margin-right: 10px;
    display: inline-block;
    width: 3px;
    height: 16px;
    border-radius: 3px;
    background-color: #4c81f6;
    content: ' ';
  }

  .tablebox {
    width: 100%;
    height: 630px;
    max-height: 800px;
  }
}

.cursor {
  cursor: pointer;
  color: #4474dd;
}

.centerbox {
  width: 95%;
  height: auto;

  .tabletile {
    font-weight: bold;
    margin-top: 30px;
  }

  .item {
    display: flex;
    flex-direction: row;
    padding: 10px 10px;
    font-size: 16px;

    .datatitle {
      display: flex;
      justify-content: flex-start;
    }

    .datalist {
      padding-left: 20px;
    }
  }
}

/deep/ .el-pagination.is-background li:not(.disabled).active:hover {
  color: white;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.item-table-title {
  display: flex;
  align-items: center;
  line-height: 20px;

  > .el-alert {
    padding: 6px 12px;
    margin-left: 16px;
  }
}
</style>
